<template>
    <div class="myChart">
        <span
            style="color:white;font-size: 14px;font-weight: bold;font-style: italic;letter-spacing: 2px;margin-left: 10%;">设备异常报警</span>
        <img src="../../assets/images/divide.png" alt="" style="width: 100%;">
        <dv-charts :option="optionConfig" style="width: 100%;height: 80%;" />
        <img src="../../assets/images/left-bottom.png" alt="" style="position: absolute;left: 0;bottom: 0;">
    </div>
</template>

<script>
import { deviceAlarm } from '../../api/oil/statistic';
import DateTool from '../../utils/DateTool';
export default {
    name: 'DeviceAlarmBar',
    data() {
        return {
            optionConfig: {},
            option: {
                title: {
                    show: false,
                    text: ""
                },
                xAxis: {
                    name: '',
                    // data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        style: {
                            fill: '#fff',
                            fontSize: 12
                        }
                    },
                    axisLine: {
                        style: {
                            stroke: '#fff',
                            lineWidth: 1
                        }
                    }
                },
                yAxis: {
                    name: '',
                    data: 'value',
                    min: 0,
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        style: {
                            fill: '#fff'
                        }
                    },
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    }
                },
                grid: {
                    right: '3%',
                    bottom: '10%',
                    top: '2%',
                },
                series: [
                    {
                        // data: [0, 0, 0, 1],
                        type: 'bar',
                        barWidth: '102%',
                        barStyle: {
                            fill: '#00bbfd'
                        },
                        label: {
                            show: true,
                            position: 'top',
                            offset: [0, -10],
                            style: {
                                fill: '#00bbfd',
                                fontSize: 12
                            }
                        },
                    }
                ]
            }
        };
    },
    created() {
        this.getData();
    },
    methods: {
        getData() {
            var query = {
                startDate: '2021-01-01',
                endDate: DateTool.now(),
            };
            deviceAlarm(query).then(res => {
                var data = res.data;
                console.log(data);
                this.option.xAxis.data = data.map(obj => obj.name);
                this.option.series[0].data = data.map(obj => obj.alarm_count);
                this.optionConfig = this.option;
                console.log(this.option);
            });
        }
        // Add your methods here
    },
    mounted() {
        // Add your mounted logic here
    }
};
</script>

<style scoped></style>